<template>
    <div style="width: 100%" v-loading="loading">
        <el-row  :gutter="20" >
            <el-col :span="24" >
                <h3>{{title}}</h3>
            </el-col>
        </el-row>

        <el-row  :gutter="20" >
            <el-col :span="6" v-for="(item, index) in episodes" :offset="1" style="padding: 10px">
                <el-card :body-style="{ padding: '10px' }">
                    <router-link :to="  '/movie/'+item.av_id  ">
                    <img :src="item.cover" style="width:100%;height:200px" />
                     </router-link>
                    <div style="padding: 14px;">
                        <el-tag>{{item.index}}</el-tag>  <span>{{item.index_title}}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {spApi} from '../apis/sp.js';

    //专题查看
    export default {
        data () {
            return {
                loading :true,
                episodes:[],
                title:""
            }
        },
        mounted() {

            this.refreshSPs(this.$route.params.season_id)
        },
        watch: {
            '$route' (to, from) {
                // 对路由变化作出响应...
                this.refreshSPs(to.params.season_id)
            }
        },
        methods:{

            refreshSPs(season_id){
                this.loading=true;
                //取得专题视频
                spApi.getSpview(season_id)
                        .then(function (ret) {

                                this.loading=false;
                                this.title=ret.result.title;
                                this.episodes =ret.result.episodes;


                        }.bind(this))
            }
        }
    }

</script>


<style>
</style>